<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>正文</div>
    <script>
        //1.document.querySelector / document.querySelectorAll
        //document.querySelector方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项，则返回null。
        //document.querySelectorAll 方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

        //2.document.createElement
        //3.Node.appendChild
        //Node.appendChild()方法将节点添加到给定父节点的子节点列表的末尾。 请注意，如果给定的子代是文档中现有节点的引用，则它将移动到新位置。看看示例：
        let list = document.createElement('ul');
        ['北京','上海','成都'].forEach(ele=>{
            let listItem = document.createElement('li');
            listItem.innerText = ele;
            list.appendChild(listItem)
        })
        document.body.appendChild(list);

        //4.Node.insertBefore
        let firstCity = list.querySelector('ul > li');
        let newCity = document.createElement('li');
        newCity.textContent = '深圳';
        list.insertBefore(newCity, firstCity);

        //5.Node.removeChild
        //Node.removeChild方法从DOM中删除一个子节点并返回删除的节点。 请注意，返回的节点不再是DOM的一部分，而是仍存在于内存中。 如果处理不当，可能会导致内存泄漏。
        let oneItem = list.querySelector('li');
        let removedItem = list.removeChild(oneItem);

        //6.Node.replaceChild
        //此方法替换父节点中的子节点(并返回替换后的旧子节点)。请注意，如果处理不当，此方法可能导致与Node.removeChild类似的内存泄漏问题。
        let oldItem = list.querySelector('li');
        let newItem = document.createElement('li');
        newItem.innerHTML = '前端小智';
        let replacedItem = list.replaceChild(newItem, oldItem);

        //7.Node.cloneNode
        // Node.cloneNode(deep) 方法返回调用该方法的节点的一个副本，**deep(可选)**表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.
        let clone = list.cloneNode(true);
        document.body.appendChild(clone)

        //8.Element.getAttribute / 9.Element.setAttribute
        list.setAttribute('id', 'my-list');
        console.log(list.getAttribute('id'));// outputs my-list
        
        //10.Element.hasAttribute / 11.Element.removeAttribute
        //Element.hasAttribute方法检查给定元素是否具有指定的属性，返回值为boolean。 通过调用Element.removeAttribute方法，我们可以从元素中删除具有给定名称的属性。
        if (list.hasAttribute('id')) {
            console.log('有id这个属性');
            list.removeAttribute('id');
        };

        //12.Element.insertAdjacentHTML
        //element.insertAdjacentHTML(position, text) 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。
        //它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
        list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');
    </script>
</body>
</html>